<template>
  <div class="register-wrap">
    <common-header :content="registerTitle"></common-header>
    <div class="form-list">
      <ul>
        <li class="form-item">
          <div class="title">请输入用户名</div>
          <input type="text"
                 placeholder="请输入用户名"
                 v-model="userName">
        </li>
        <li class="form-item">
          <div class="title">请输入手机号码</div>
          <input type="text"
                 placeholder="请输入手机号码"
                 v-model="phone">
        </li>
        <li class="form-item">
          <div class="title">请输入手机验证码</div>
          <div class="get-input-box">
            <input type="text"
                   placeholder="请输手机入验证码"
                   v-model="phoneCode">
            <div class="get-code"
                 @click="handleGetCode">{{codeTime}} <span v-show="codeTime > 0">秒</span> </div>
          </div>
        </li>
        <li class="form-item">
          <div class="title">请输入验证码</div>
          <div class="input-box">
            <input type="text"
                   placeholder="请输入验证码"
                   v-model="code">
            <div class="check-code"
                 w-180-90
                 aspectratio
                 @click="getImgCode">
              <img :src="codeImg"
                   alt=""
                   aspectratio-content>
            </div>
          </div>
        </li>
        <li class="form-item">
          <div class="title">设置密码</div>
          <input type="text"
                 placeholder="设置密码"
                 v-model="password">
        </li>
      </ul>
      <common-button :content="buttonTitle"
                     @submit="handleSubmit"></common-button>
    </div>
  </div>
</template>
<script>
import CommonHeader from 'common/header/header'
import CommonButton from 'common/button/button'
export default {
  name: 'register',
  components: {
    CommonHeader,
    CommonButton
  },
  data () {
    return {
      registerTitle: '注册',
      buttonTitle: '注册',
      phone: '',
      code: '',
      phoneCode: '',
      password: '',
      userName: '',
      codeTime: '获取验证码',
      timer: null,
      codeImg: ''
    }
  },
  created () {
    this.getImgCode()
  },
  methods: {
    handleSubmit () {
      const flag = this.check()
      if (flag) {
        this.getRegister()
      }
    },
    getRegister () {
      const username = this.userName
      const password = this.password
      const mobile = this.phone
      const code = this.phoneCode
      const captcha = this.code
      this.$api.user.register({ username, password, mobile, code, captcha })
        .then(this.getRegisterSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getRegisterSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$toast.success('注册成功')
        this.$router.push({
          path: '/login'
        })
      } else if (res.code === this.$api.CODE_ERROR) {
        this.$toast({
          duration: 1000,
          message: res.msg
        })
      }
    },
    check () {
      const phoneReg = /^1[3456789]\d{9}/
      const passwordReg = /\w{6,16}/
      if (this.userName === '') {
        this.$toast({
          duration: 1000,
          message: '用户名不能为空'
        })
        return false
      }
      if (!phoneReg.test(this.phone)) {
        this.$toast({
          duration: 1000,
          message: '请输入正确的手机格式'
        })
        return false
      }
      if (this.phoneCode === '') {
        this.$toast({
          duration: 1000,
          message: '手机验证码不能为空'
        })
        return false
      }
      if (this.code === '') {
        this.$toast({
          duration: 1000,
          message: '验证码不能为空'
        })
        return false
      }
      if (!passwordReg.test(this.password)) {
        this.$toast({
          duration: 1000,
          message: '密码格式不正确，6~16位的字母或者数字'
        })
        return false
      }
      return true
    },
    handleGetCode () {
      const CODE = '获取验证码'
      const phoneReg = /^1[3456789]\d{9}/
      if (!phoneReg.test(this.phone)) {
        this.$toast({
          duration: 1000,
          message: '请输入正确的手机格式'
        })
        return false
      }
      const date = +new Date()
      const minute = 1 * 60 * 1000
      const codeDate = this.$localStorage.get('CODE_DATE')
      const seconds = (date - codeDate) / 1000
      const residue = Math.round(60 - (date - codeDate) / 1000)
      if (codeDate != null) {
        if ((date - codeDate) > minute) {
          this.$localStorage.set('CODE_DATE', date)
          if (this.codeTime === CODE) {
            this.codeTime = 60
            this.countDown()
            this.getCode()
          }
        } else {
          this.$toast({
            duration: 1000,
            message: `请${residue}秒后再试`
          })
        }
      } else {
        this.$localStorage.set('CODE_DATE', date)
        if (this.codeTime === CODE) {
          this.codeTime = 60
          this.countDown()
          this.getCode()
        }
      }
      // this.getCode()
    },
    getCode () {
      const mobile = this.phone
      this.$api.user.send({ mobile })
        .then(this.getCodeSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getCodeSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        console.log(res.msg)
      }
    },
    countDown () {
      if (this.timer) clearTimeout(this.timer)
      if (this.codeTime > 0) {
        this.codeTime = this.codeTime - 1
        setTimeout(() => {
          this.countDown()
        }, 1000)
      } else {
        clearTimeout(this.timer)
        this.codeTime = '获取验证码'
      }
    },
    getImgCode () {
      this.codeImg = ''
      this.$api.user.imgCode()
        .then(this.getImgCodeSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getImgCodeSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.codeImg = data
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.register-wrap
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc_gray
  z-index 10
  overflow-y scroll
  padding-bottom 40px
  padding-top 108px
  padding-left 34px
  padding-right 34px
  box-sizing border-box

  .form-list
    width 100%
    background-color $common_bgc
    box-shadow 0px 6px 12px 0px rgba(47, 53, 66, 0.16)
    border-radius 32px
    padding-top 43px
    padding-left 56px
    padding-right 56px
    padding-bottom 64px
    box-sizing border-box
    margin-bottom 28px

    ul
      width 100%
      margin-bottom 28px

      .form-item
        width 100%
        margin-bottom 36px

        .title
          font-size $address
          line-height 58px
          font-weight 400
          color $original_price
          text-indent 30px

        input
          width 100%
          height 92px
          background $common_bgc
          border 2px solid $border_color
          border-radius 24px
          text-indent 30px
          padding-right 10px
          box-sizing border-box
          font-size $address
          font-weight 400
          color $footer_bgc

        .get-input-box
          position relative

          input
            padding-right 200px
            box-sizing border-box

          .get-code
            width 200px
            position absolute
            top 0
            right 0
            height 100%
            line-height 92px
            text-align center
            font-size $address
            font-weight 400
            color $footer_bgc

        .input-box
          display flex
          align-items center
          justify-content space-between

          input
            width 380px
            padding-right 10px
            box-sizing border-box
            margin-right 10px

          .check-code
            width 180px
            height 92px
            text-align center
            line-height 92px
            // background-color $border_color
</style>
